<template>
  <a-modal
    :visible="visible"
    title="冲突检查结果"
    width="800px"
    :footer="null"
    @cancel="$emit('close')"
  >
    <div class="conflict-check-container">
      <!-- 冲突概览 -->
      <a-alert
        :message="conflictSummary"
        :type="hasConflict ? 'error' : 'success'"
        show-icon
        style="margin-bottom: 20px"
      />
      
      <!-- 冲突详情标签页 -->
      <a-tabs v-model="activeTab">
        <!-- 课程冲突 -->
        <a-tab-pane key="course" tab="课程冲突">
          <a-table
            :columns="courseConflictColumns"
            :dataSource="conflicts.courseConflicts"
            rowKey="id"
            :pagination="false"
          >
            <template slot="conflictType" slot-scope="text">
              <a-tag :color="text === '时间冲突' ? 'red' : 'orange'">
                {{ text }}
              </a-tag>
            </template>
            <template slot="action" slot-scope="text, record">
              <a @click="handleViewDetail(record)">查看详情</a>
              <a-divider type="vertical" />
              <a @click="handleResolve(record)">解决冲突</a>
            </template>
          </a-table>
        </a-tab-pane>
        
        <!-- 教室冲突 -->
        <a-tab-pane key="room" tab="教室冲突">
          <a-table
            :columns="roomConflictColumns"
            :dataSource="conflicts.roomConflicts"
            rowKey="id"
            :pagination="false"
          >
            <template slot="conflictCourses" slot-scope="text">
              <a-tag v-for="course in text" :key="course.id" color="red">
                {{ course.name }}
              </a-tag>
            </template>
          </a-table>
        </a-tab-pane>
        
        <!-- 教师冲突 -->
        <a-tab-pane key="teacher" tab="教师冲突">
          <a-table
            :columns="teacherConflictColumns"
            :dataSource="conflicts.teacherConflicts"
            rowKey="id"
            :pagination="false"
          >
            <template slot="conflictTime" slot-scope="text">
              {{ text.date }} {{ text.time }}
            </template>
          </a-table>
        </a-tab-pane>
        
        <!-- 考试冲突 -->
        <a-tab-pane key="exam" tab="考试冲突" v-if="conflicts.examConflicts.length > 0">
          <a-table
            :columns="examConflictColumns"
            :dataSource="conflicts.examConflicts"
            rowKey="id"
            :pagination="false"
          >
            <template slot="examTime" slot-scope="text">
              {{ text.date }} {{ text.time }}
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
      
      <!-- 操作按钮组 -->
      <div class="action-buttons">
        <a-button type="primary" @click="handleExport" icon="download">
          导出冲突报告
        </a-button>
        <a-button @click="handleIgnore" v-if="hasConflict" style="margin-left: 10px">
          忽略冲突
        </a-button>
        <a-button @click="$emit('close')" style="margin-left: 10px">
          关闭
        </a-button>
      </div>
    </div>
    
    <!-- 冲突详情抽屉 -->
     <a-drawer
          title="冲突详情"
          width="600"
          :visible="detailVisible"
          @close="detailVisible = false"
        >
          <conflict-detail 
            :data="currentConflict" 
            @apply-solution="handleApplySolution"
            v-if="detailVisible" 
          />
        </a-drawer>
  </a-modal>
</template>

<script>
import ConflictDetail from './ConflictDetail.vue'

const courseConflictColumns = [
  {
    title: '冲突课程',
    dataIndex: 'courseName'
  },
  {
    title: '冲突类型',
    dataIndex: 'conflictType',
    scopedSlots: { customRender: 'conflictType' }
  },
  {
    title: '冲突时间',
    dataIndex: 'conflictTime'
  },
  {
    title: '冲突对象',
    dataIndex: 'conflictTarget'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

const roomConflictColumns = [
  {
    title: '教室',
    dataIndex: 'roomName'
  },
  {
    title: '冲突时间',
    dataIndex: 'conflictTime'
  },
  {
    title: '冲突课程',
    dataIndex: 'conflictCourses',
    scopedSlots: { customRender: 'conflictCourses' }
  }
]

const teacherConflictColumns = [
  {
    title: '教师',
    dataIndex: 'teacherName'
  },
  {
    title: '冲突时间',
    dataIndex: 'conflictTime',
    scopedSlots: { customRender: 'conflictTime' }
  },
  {
    title: '冲突课程',
    dataIndex: 'conflictCourses'
  }
]

const examConflictColumns = [
  {
    title: '考试名称',
    dataIndex: 'examName'
  },
  {
    title: '考试时间',
    dataIndex: 'examTime',
    scopedSlots: { customRender: 'examTime' }
  },
  {
    title: '冲突课程',
    dataIndex: 'conflictCourse'
  }
]

export default {
  components: {
    ConflictDetail
  },
  props: {
    visible: Boolean,
    conflicts: {
      type: Object,
      default: () => ({
        hasConflict: true,
        courseConflicts: [
          {
            id: '1',
            courseName: '高等数学（上）	',
            conflictType: '时间冲突',
            conflictTime: '周一 1-2节',
            conflictTarget: '数据结构'
          }
        ],
        roomConflicts: [
          {
            id: 'r1',
            roomName: 'bj007',
            conflictTime: '周二 3-4节',
            conflictCourses: [
              { id: 'c1', name: 'PLC与工业控制技术' },
              { id: 'c2', name: '物理实验' }
            ]
          }
        ],
        teacherConflicts: [
          {
            id: 't1',
            teacherName: '王芳',
            conflictTime: { date: '2024-06-01', time: '5-6节' },
            conflictCourses: '数据结构, 算法分析'
          }
        ],
        examConflicts: [
          {
            id: 'e1',
            examName: '期中考试',
            examTime: { date: '2024-06-10', time: '全天' },
            conflictCourse: '高等数学（上）	补课'
          }
        ]
      })
    }
  },
  data() {
    return {
      activeTab: 'course',
      courseConflictColumns,
      roomConflictColumns,
      teacherConflictColumns,
      examConflictColumns,
      detailVisible: false,
      currentConflict: null
    }
  },
  computed: {
    hasConflict() {
      return this.conflicts.hasConflict
    },
    conflictSummary() {
      if (!this.hasConflict) {
        return '未检测到任何冲突'
      }
      
      const counts = {
        course: this.conflicts.courseConflicts.length,
        room: this.conflicts.roomConflicts.length,
        teacher: this.conflicts.teacherConflicts.length,
        exam: this.conflicts.examConflicts.length
      }
      
      return `检测到 ${counts.course} 个课程冲突, ${counts.room} 个教室冲突, 
             ${counts.teacher} 个教师冲突, ${counts.exam} 个考试冲突`
    }
  },
  methods: {
	   handleApplySolution(solution) {
	        this.$emit('resolve', solution)
	        this.detailVisible = false
	      },
    handleViewDetail(record) {
      this.currentConflict = record
      this.detailVisible = true
    },
    handleResolve(record) {
      this.$confirm({
        title: '解决冲突',
        content: '确定要自动解决这个冲突吗?',
        onOk: () => {
          this.$message.success('冲突已解决')
          this.$emit('resolve', record)
        }
      })
    },
    handleExport() {
      this.$message.success('冲突报告已导出')
      // 实际项目中这里会调用导出API
    },
    handleIgnore() {
      this.$confirm({
        title: '忽略冲突',
        content: '确定要忽略所有冲突吗?这可能导致课表安排出现问题',
        onOk: () => {
          this.$message.warning('已忽略所有冲突')
          this.$emit('ignore')
        }
      })
    }
  }
}
</script>

<style scoped>
.conflict-check-container {
  padding: 10px;
}

.action-buttons {
  margin-top: 20px;
  text-align: right;
}
</style>